<template>
<div class="pageW">
  <head title="Bill"></head>
  <div class="wrapper">
    <div class="topTit">
      <text class="titName">Bill</text>

      <div class="titFil" @click="minibarRightButtonClick">
        <text
          class="fillTxt"
        >{{this.listType=='1'?'AII':this.listType=='2'?'Income':this.listType=='2'?'Withdraw':'filter'}}</text>
        <image class="fillImg" src="root:img/down.png" alt />
      </div>
    </div>
    <scroller class="scroller">
      <div class="item" v-for="(item,index) in listArr" :key="index">
        <div class="itemLeft">
          <text class="time">{{item.create_time|formatDateTime}}</text>
          <text class="itemName">{{item.type=='3'?'Withdraw':item.type=='2'?'Income':'rewards'}}</text>
        </div>
        <text class="money">{{item.type_2==1?'+':'-'}} {{item.money}}</text>
      </div>
    </scroller>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
  <wxc-popover
    ref="wxc-popover"
    :buttons="btns"
    :position="popoverPosition"
    :arrowPosition="popoverArrowPosition"
    @wxcPopoverButtonClicked="popoverButtonClicked"
  ></wxc-popover>
</div>
</template>

<script>
import { WxcMinibar, WxcPopover } from "weex-ui";
import { get_withdraw_list ,get_price_list} from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";
export default {
  components: { WxcMinibar, WxcPopover },
  data() {
    return {
      users_id: "",
      page: 1,
      balance: "",
      poundage: "",
      content: "",
      min_price: "",
      listType: "",
     
      listArr: [],
      popoverPosition: { x: -15, y: 180 },
      popoverArrowPosition: { pos: "top", x: -15 },
      btns: [
        {
          text: "AII",
          key: ""
        },
        {
          text: "Income",
          key: "1"
        },
        {
          text: "Withdraw",
          key: "2"
        }
      ]
    };
  },
  created() {
    asCore.getBsessionid(userId => {
      this.users_id = userId;
      this.getList();
    });
  },
  methods: {
    minibarRightButtonClick() {
      this.$refs["wxc-popover"].wxcPopoverShow();
      
    },
    popoverButtonClicked(obj) {
      this.listType = obj.key;
      
      this.getList();
    },
    getList() {
      this.isLoading = true;
      get_price_list(
        {
          users_id: this.users_id,
          page: this.page,
          page_num: 10, 
          type_2:this.listType,
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              this.listArr = res.data.list;
              
            }
          }
        }
      );
    },
    gonext(url, parmar) {
      this.push(url, parmar);
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
  flex: 1;
}
.pageW {
  flex: 1;
}
.topTit {
  /* background-color: #FFFFFF; */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 76px;
}

.titName {
  font-size: 32px;
  color: #333333;
}

.titFil {
  flex-direction: row;
  align-items: center;
}
.fillTxt {
  font-size: 28px;
  color: #666666;
}
.fillImg {
  width: 32px;
  height: 32px;
  margin-left: 10px;
}

.scroller {
  flex: 1;
  background-color: #ffffff;
}

.item {
  flex-direction: row;
  justify-content: space-between;
  margin-left: 32px;
  margin-right: 30px;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-color: #eaeaea;
  border-bottom-style: solid;
}

.itemLeft {
  flex-direction: column;
}

.time {
  font-size: 28px;
  color: #999999;
  margin-left: 10px;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}

.itemName {
  font-size: 28px;
  margin-top: 10px;
  color: #1e1e1e;
   margin-left: 10px;
}
.money {
  color: #1e1e1e;
  font-size: 34px;
  margin-right: 10px;
}
</style>
